<!-- 收货地址 -->
<template>
	<view >
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="select()">
				<view class="item-top">
          <image :src="item.image" mode="aspectFill"></image>
					<view class="item-top-sidebar">
						<view class="name">
              {{item.good_name}}
						</view>
						<view class="msg">
              {{`${item.forge_name}活动获得`}}
						</view>
            <view class="msg">
              {{item.create_time || '　'}}
            </view>
					</view>
				</view>
			</view>
			<!-- 无数据时显示 -->
			<view class="normal-box" v-if="list.length == 0">
        <u-empty class="" mode="data" v-if="!list || list.length === 0"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//自定义头部
				headerHeight: 0,

        list: [],
			}
		},
    onLoad(option) {

    },
		onShow() {
      this.userAddressList();
		},
		methods: {
      userAddressList() {
        this.$http('api/user/userGoodRewardList').then(res => {
          this.list = res;
        });
      },

		}
	}
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style scoped lang="scss">
page{
  background: #f5f5f5;
}
	.radio-row {
		display: flex;
		align-items: center;
	}
	
	.circle {
		width: 27rpx;
		height: 27rpx;
    filter: brightness(0.2);
	}
	
	.default {
		color: #3c3c3c;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-left: 16rpx;
	}
	
	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 20rpx 22rpx 0;
		box-sizing: border-box;
	}
	
	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 18rpx;
		padding: 0 18rpx;
		box-sizing: border-box;
	}
	
	.item:last-child {
		margin-bottom: 0;
	}
	
	.item-top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx 0 24rpx;
		box-sizing: border-box;
	}
  .item-top image{
    width: 150rpx;
    height: 150rpx;
  }
	
	.item-top-sidebar {
    height: 150rpx;
    padding-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
    justify-content: space-between;
	}
	
	.address-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 16rpx;
	}
	
	.item-bottom {
		width: 100%;
		height: 68rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #dadada;
		box-sizing: border-box;
	}
	
	.name {
		width: 100%;
		display: flex;
		align-items: center;
		color: #3c3c3c;
		font-size: 36rpx;
	}
	
	.number {
		color: #999999;
		font-size: 22rpx;
		margin-left: 24rpx;
	}
	
	.msg {
		width: 100%;
		color: #999999;
		font-size:28rpx;
		margin-top: 5rpx;
	}
	
	.btn-box {
		display: flex;
		align-items: center;
	}
	
	.btn-box button {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #999999;
		margin: 0;
		background-color: initial;
		border-radius: initial;
		padding: 0;
    &::after{
      display: none;
    }
	}
	
	.btn-box button:last-child {
		margin-right: 0;
	}
	
	.btn-box button image {
		width: 25rpx;
		height: 25rpx;
		margin-right: 16rpx;
    filter: brightness(0.2);
	}
	
	.edit-btn {
    width: max-content;
    padding: 0;
		background: initial;
		border-radius: initial;
		margin: 0;
    border: none;
    color: #999999;
    &::after{
      display: none;
    }
	}

	.footer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 85rpx;
		box-sizing: border-box;
	}
	
	.footer button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
    background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 100rpx;
	}
	
	.normal-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 100rpx 0;
	}
	
	.normal-box image {
		width: 500rpx;
		margin-bottom: 60rpx;
	}
</style>
